<template>
  <div class="price">
    <div class="price_shai">
      <p @click="getPrice(v)" v-for="(v,i) in priceList" :key="i">{{v}}万</p>
    </div>
    <p>￥{{value[0]}}万 --- ￥{{value[1]}}万</p>
    <van-slider v-model="value" range @change="onChange" />
    <button @click="submit(e)">确定</button>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: [30, 50],
      priceList: [
        "10",
        "20",
        "30",
        "50",
        "100",
        "1000",
      ],
    };
  },
  methods: {
    onChange(value) {
      Toast("当前值：" + value);
    },
    submit(e) {
      this.$emit('submit','')
    },
    getPrice(v) {
      this.$emit('getPrice', v)
      // console.log(v)
    }
  },
  created() {},
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.price {
  width: 100%;
  position: absolute;
  top: 210px;
  left: 0;
  background: #fff;
}
.price >p {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.price > button {
  width: 100%;
  height: 50px;
  border: 0;
  outline: none;
  background: tomato;
  margin-top: 50px;
  color: #fff;
}

.price_shai {
  width: 100%;
  height: auto;
}
.price_shai>p {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
</style>